<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div v-transform-body="false">插入到body中</div>
		</div>
		<script>
			/*
				v-show="show"
					指令名字 show
					“miaov” 表达式
					false  值
				v-on:click.stop="miaov"
					click 指令的参数
					stop 修饰符
			*/
			// 注册一个指令
			/*
				全局注册 局部注册
				Vue.directive('指令名（focus）',{
					bind：只调用一次，指令第一次绑定到元素时调用
					inserted：被绑定元素插入父节点时调用 
					update：更新时调用
					componentUpdated： 更新完毕调用
					unbind：只调用一次，指令与元素解绑时调用
				})
				使用：v-focus

				钩子函数接收的参数：
					el:指令所绑定的元素，可以用来直接操作 DOM
					binding:
						name  指令名
						value 解析后的值
						expression 写在指令的表达式
						modifiers 修饰符
				
				控制台用：
					getEventListeners(node)
					查看使用addEventListener绑定的监听器
			*/

			Vue.directive('transform-body',{
				inserted(el){
					document.body.appendChild(el);
				}
			})

			new Vue({
				el: '#app',
				data:{
					message: '父级的数据',
					show: true
				}/*,
				directives:{
					focus:{  // v-focus

					}
				}*/
			})

		</script>
	</body>
</html>